<template>
  <div class="welfare-card-management">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="admin-logo">
          <div class="admin-logo-icon">管</div>
          <div class="admin-logo-text">管理系统</div>
        </div>
      </div>
      
      <div class="sidebar-menu">
        <div 
          v-for="menu in menuList" 
          :key="menu.name"
          class="menu-item"
          :class="{ active: menu.name === 'card' }"
          @click="handleMenuClick(menu)"
        >
          <div class="menu-icon">{{ menu.icon }}</div>
          <span>{{ menu.label }}</span>
        </div>
      </div>
      
      <div class="sidebar-footer">
        <div class="admin-avatar-container">
          <div class="admin-avatar">{{ adminInitial }}</div>
          <div class="admin-info">
            <div class="admin-name">{{ adminName }}</div>
            <div class="admin-role">超级管理员</div>
          </div>
        </div>
        
        <!-- 退出登录按钮 -->
        <div class="logout-btn" @click="handleLogout">
          <div class="logout-icon">🚪</div>
          <span>退出登录</span>
        </div>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部导航 -->
      <div class="top-nav">
        <h1 class="page-title">
          <div class="page-title-icon">🎁</div>
          福利额度卡管理
        </h1>
      </div>
      
      <!-- Tab标签页 -->
      <div class="tab-section">
        <el-tabs v-model="activeTab">
          <!-- Tab 1: 批量生成 -->
          <el-tab-pane label="批量生成" name="generate">
            <div class="tab-content">
              <el-card class="generate-card">
                <template #header>
                  <div class="card-header">
                    <span>批量生成额度卡</span>
                  </div>
                </template>
                
                <el-form ref="generateFormRef" :model="generateForm" :rules="generateRules" label-width="120px">
                  <el-form-item label="卡面额" prop="amount">
                    <el-select v-model="generateForm.amount" placeholder="请选择面额" style="width: 300px">
                      <el-option label="50元" :value="50" />
                      <el-option label="100元" :value="100" />
                      <el-option label="200元" :value="200" />
                      <el-option label="500元" :value="500" />
                      <el-option label="1000元" :value="1000" />
                      <el-option label="2000元" :value="2000" />
                      <el-option label="5000元" :value="5000" />
                      <el-option label="自定义" :value="'custom'" />
                    </el-select>
                    
                    <el-input 
                      v-if="generateForm.amount === 'custom'"
                      v-model="generateForm.customAmount" 
                      placeholder="请输入面额(50~1000000)" 
                      style="width: 300px; margin-left: 10px"
                    />
                  </el-form-item>
                  
                  <el-form-item label="生成数量" prop="count">
                    <el-input-number 
                      v-model="generateForm.count" 
                      :min="1" 
                      :max="10000" 
                      placeholder="请输入生成数量"
                      style="width: 300px"
                    />
                    <span class="form-tip">每次最多生成10000张</span>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button class="generate-btn" @click="handleGenerate" :loading="generating">
                      <span class="btn-icon">⚡</span>
                      开始生成
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>
          
          <!-- Tab 2: 卡片管理 -->
          <el-tab-pane label="卡片管理" name="manage">
            <div class="tab-content">
              <!-- 筛选区域 -->
              <el-card class="filter-card">
                <el-form :model="queryForm" :inline="true">
                  <el-form-item label="状态">
                    <el-select v-model="queryForm.status" placeholder="全部状态" clearable style="width: 150px">
                      <el-option label="全部" value="" />
                      <el-option label="未发放" :value="0" />
                      <el-option label="已发放" :value="1" />
                      <el-option label="已兑换" :value="2" />
                      <el-option label="已过期" :value="3" />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="批次号">
                    <el-input v-model="queryForm.batchNo" placeholder="请输入批次号" clearable style="width: 200px" />
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button class="filter-btn search-btn" @click="handleQuery">
                      <span class="btn-icon">🔍</span>
                      查询
                    </el-button>
                    <el-button class="filter-btn reset-btn" @click="handleReset">
                      <span class="btn-icon">🔄</span>
                      重置
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              
              <!-- 数据表格 -->
              <el-card class="table-card">
                <el-table :data="cardList" v-loading="loading" stripe>
                  <el-table-column prop="cardNumber" label="卡号" min-width="180">
                    <template #default="{ row }">
                      <span>{{ row.cardNumber }}</span>
                    </template>
                  </el-table-column>
                  
                  <el-table-column prop="cardPassword" label="密码" min-width="180">
                    <template #default="{ row }">
                      <span>{{ row.cardPassword }}</span>
                    </template>
                  </el-table-column>
                  
                  <el-table-column prop="amount" label="面额" width="100">
                    <template #default="{ row }">
                      <span class="amount-text">¥{{ row.amount }}</span>
                    </template>
                  </el-table-column>
                  
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="{ row }">
                      <el-tag :type="getStatusType(row.status)">
                        {{ getStatusText(row.status) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  
                  <el-table-column prop="batchNo" label="批次号" width="180" />
                  
                  <el-table-column prop="userId" label="持有员工" width="120">
                    <template #default="{ row }">
                      {{ row.user && row.user.realName ? row.user.realName : '-' }}
                    </template>
                  </el-table-column>
                  
                  <el-table-column prop="issueTime" label="发放时间" width="160">
                    <template #default="{ row }">
                      {{ formatDateTime(row.issueTime) }}
                    </template>
                  </el-table-column>
                  
                  <el-table-column prop="expireTime" label="过期时间" width="160">
                    <template #default="{ row }">
                      {{ formatDateTime(row.expireTime) }}
                    </template>
                  </el-table-column>
                </el-table>
                
                <!-- 分页 -->
                <div class="pagination-section">
                  <el-pagination
                    v-model:current-page="queryForm.current"
                    v-model:page-size="queryForm.size"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleQuery"
                    @current-change="handleQuery"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <!-- Tab 3: 发放管理 -->
          <el-tab-pane label="发放管理" name="issue">
            <div class="tab-content">
              <!-- Excel导入 -->
              <el-card class="issue-card">
                <template #header>
                  <div class="card-header">
                    <span>Excel导入发放</span>
                  </div>
                </template>
                
                <div class="upload-section">
                  <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    :auto-upload="false"
                    :on-change="handleFileChange"
                    :limit="1"
                    accept=".xls,.xlsx"
                    :file-list="importFile ? [importFile] : []"
                  >
                    <template #trigger>
                      <el-button class="upload-btn" size="large">
                        <span class="btn-icon">📁</span>
                        选择Excel文件
                      </el-button>
                    </template>
                  </el-upload>
                  
                  <el-button class="import-btn" @click="handleImport" :loading="importing">
                    <span class="btn-icon">📥</span>
                    导入并发放
                  </el-button>
                  
                  <el-button link type="primary" @click="downloadTemplateFile">
                    <span class="btn-icon">📥</span>
                    下载Excel模板
                  </el-button>
                </div>
              </el-card>
              
              <!-- 多选员工发放 -->
              <el-card class="issue-card">
                <template #header>
                  <div class="card-header">
                    <span>多选员工批量发放</span>
                  </div>
                </template>
                
                <div class="batch-issue-section">
                  <el-form :model="batchIssueForm" label-width="150px">
                    <el-form-item label="选择员工">
                      <el-button class="select-employee-btn" @click="showEmployeeDialog = true">
                        <span class="btn-icon">👥</span>
                        选择员工
                      </el-button>
                      <span class="selected-count">
                        已选择 {{ batchIssueForm.userIds.length }} 名员工
                      </span>
                    </el-form-item>
                    
                    <el-form-item label="单张面额">
                      <el-select v-model="batchIssueForm.amount" placeholder="请选择面额" style="width: 200px">
                        <el-option label="50元" :value="50" />
                        <el-option label="100元" :value="100" />
                        <el-option label="200元" :value="200" />
                        <el-option label="500元" :value="500" />
                        <el-option label="1000元" :value="1000" />
                        <el-option label="自定义" :value="'custom'" />
                      </el-select>
                      
                      <el-input 
                        v-if="batchIssueForm.amount === 'custom'"
                        v-model="batchIssueForm.customAmount" 
                        placeholder="请输入面额" 
                        style="width: 200px; margin-left: 10px"
                      />
                    </el-form-item>
                    
                    <el-form-item label="每人发放张数">
                      <el-input-number 
                        v-model="batchIssueForm.countPerUser" 
                        :min="1" 
                        :max="100" 
                        style="width: 200px"
                      />
                    </el-form-item>
                    
                    <el-form-item>
                      <el-button class="issue-btn" @click="handleBatchIssue" :loading="issuing">
                        <span class="btn-icon">✅</span>
                        开始发放
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <!-- 员工选择对话框 -->
    <el-dialog v-model="showEmployeeDialog" title="选择员工" width="800px">
      <el-input v-model="employeeSearchKeyword" placeholder="搜索员工姓名/工号" style="margin-bottom: 15px" />
      <el-table :data="filteredEmployeeList" @selection-change="handleEmployeeSelection">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="realName" label="姓名" />
        <el-table-column prop="employeeNo" label="工号" />
        <el-table-column prop="department" label="部门" />
      </el-table>
      
      <template #footer>
        <el-button @click="showEmployeeDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmEmployeeSelection">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  batchGenerateCards, 
  getCardsList,
  importIssueCards,
  batchIssueToUsers,
  downloadTemplate
} from '@/api/welfareCard'
import request from '@/utils/request'

const router = useRouter()
const userStore = useUserStore()

// 管理员信息
const adminName = computed(() => userStore.userInfo?.realName || '系统管理员')
const adminInitial = computed(() => adminName.value.charAt(0))

// 菜单列表
const menuList = [
  { name: 'dashboard', label: '数据看板', icon: '📊', path: '/admin/dashboard' },
  { name: 'employee', label: '员工管理', icon: '👥', path: '/admin/employee' },
  { name: 'card', label: '福利卡管理', icon: '🎁', path: '/admin/welfare-card' },
  { name: 'product', label: '商品管理', icon: '🛒', path: '/admin/product' },
  { name: 'order', label: '订单管理', icon: '📦', path: '/admin/order' },
  { name: 'statistics', label: '数据统计', icon: '📈', path: '/admin/statistics' }
]

// 当前激活的Tab
const activeTab = ref('generate')

// Tab 1: 批量生成
const generateForm = reactive({
  amount: 100,
  customAmount: '',
  count: 100,
  expireDays: 365
})

const generateRules = {
  count: [{ required: true, message: '请输入生成数量', trigger: 'blur' }]
}

const generateFormRef = ref()
const generating = ref(false)

// Tab 2: 卡片管理
const queryForm = reactive({
  status: '',
  batchNo: '',
  current: 1,
  size: 10
})

const cardList = ref([])
const total = ref(0)
const loading = ref(false)

// Tab 3: 发放管理
const importFile = ref(null)
const importing = ref(false)

const batchIssueForm = reactive({
  userIds: [],
  amount: 100,
  customAmount: '',
  countPerUser: 1
})

const issuing = ref(false)
const showEmployeeDialog = ref(false)
const employeeList = ref([])
const employeeSearchKeyword = ref('')
const selectedEmployees = ref([])

const filteredEmployeeList = computed(() => {
  if (!employeeSearchKeyword.value) {
    return employeeList.value
  }
  const keyword = employeeSearchKeyword.value.toLowerCase()
  return employeeList.value.filter(emp => 
    emp.realName.toLowerCase().includes(keyword) || 
    emp.employeeNo.toLowerCase().includes(keyword)
  )
})

// 菜单点击
const handleMenuClick = (menu) => {
  if (menu.path) {
    router.push(menu.path)
  }
}

// 批量生成
const handleGenerate = async () => {
  try {
    await generateFormRef.value.validate()
    
    const amount = generateForm.amount === 'custom' 
      ? parseFloat(generateForm.customAmount) 
      : generateForm.amount
    
    if (generateForm.amount === 'custom' && (!amount || amount < 50 || amount > 1000000)) {
      ElMessage.error('面额必须在50~1000000之间')
      return
    }
    
    await ElMessageBox.confirm(
      `确认生成 ${generateForm.count} 张面额为 ¥${amount} 的额度卡？`,
      '确认生成',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    generating.value = true
    const response = await batchGenerateCards({ 
      amount, 
      quantity: generateForm.count, 
      expireDays: generateForm.expireDays 
    })
    
    if (response.success) {
      ElMessage.success('生成成功')
      // 切换到卡片管理Tab
      activeTab.value = 'manage'
      handleQuery()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('生成失败:', error)
      ElMessage.error('生成失败')
    }
  } finally {
    generating.value = false
  }
}

// 查询卡片列表
const handleQuery = async () => {
  loading.value = true
  try {
    const params = {
      ...queryForm,
      status: queryForm.status === '' ? null : queryForm.status
    }
    const response = await getCardsList(params)
    
    if (response.success) {
      cardList.value = response.data.records || []
      total.value = response.data.total || 0
    }
  } catch (error) {
    console.error('查询失败:', error)
    ElMessage.error('查询失败')
  } finally {
    loading.value = false
  }
}

// 重置查询
const handleReset = () => {
  queryForm.status = ''
  queryForm.batchNo = ''
  queryForm.current = 1
  handleQuery()
}

// 文件选择
const handleFileChange = (file) => {
  importFile.value = file.raw
  return false
}

// 下载模板
const downloadTemplateFile = async () => {
  try {
    const response = await downloadTemplate()
    // response.data 才是真正的 blob 数据
    const blob = response.data instanceof Blob ? response.data : new Blob([response.data], { 
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `额度卡发放模板_${new Date().getTime()}.xlsx`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    ElMessage.success('模板下载成功')
  } catch (error) {
    console.error('模板下载失败:', error)
    ElMessage.error('模板下载失败')
  }
}

// Excel导入发放
const handleImport = async () => {
  if (!importFile.value) {
    ElMessage.warning('请先选择Excel文件')
    return
  }
  
  importing.value = true
  try {
    const response = await importIssueCards(importFile.value)
    
    if (response.success) {
      const data = response.data
      let message = `导入完成：总数 ${data.total} 条，成功 ${data.successCount} 条，失败 ${data.failCount} 条`
      
      if (data.failList && data.failList.length > 0) {
        // 显示失败详情
        const failDetails = data.failList.map(item => 
          `员工：${item.employeeName || item.employeeNo || '未知'} - ${item.reason}`
        ).join('\n')
        
        ElMessageBox.alert(
          `<div style="max-height: 400px; overflow-y: auto;">
            <p><strong>${message}</strong></p>
            <br/>
            <p><strong>失败详情：</strong></p>
            <pre style="white-space: pre-wrap; word-wrap: break-word;">${failDetails}</pre>
          </div>`,
          '导入结果',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定'
          }
        )
        console.log('失败详情:', data.failList)
      } else {
        ElMessage.success(message)
      }
      
      // 清空文件选择
      importFile.value = null
      // 刷新卡片列表
      if (activeTab.value === 'manage') {
        handleQuery()
      }
    }
  } catch (error) {
    console.error('导入失败:', error)
    ElMessage.error('导入失败：' + (error.message || '未知错误'))
  } finally {
    importing.value = false
  }
}

// 获取员工列表
const getEmployeeList = async () => {
  try {
    const response = await request.get('/employees/page', {
      params: { pageNum: 1, pageSize: 1000 }
    })
    
    if (response.success) {
      employeeList.value = response.data.records || []
    }
  } catch (error) {
    console.error('获取员工列表失败:', error)
  }
}

// 员工选择
const handleEmployeeSelection = (selection) => {
  selectedEmployees.value = selection
}

// 确认员工选择
const confirmEmployeeSelection = () => {
  batchIssueForm.userIds = selectedEmployees.value.map(emp => emp.id)
  showEmployeeDialog.value = false
  ElMessage.success(`已选择 ${batchIssueForm.userIds.length} 名员工`)
}

// 批量发放
const handleBatchIssue = async () => {
  if (batchIssueForm.userIds.length === 0) {
    ElMessage.warning('请先选择员工')
    return
  }
  
  const amount = batchIssueForm.amount === 'custom' 
    ? parseFloat(batchIssueForm.customAmount) 
    : batchIssueForm.amount
    
  if (!amount || amount < 50 || amount > 1000000) {
    ElMessage.error('面额必须在50~1000000之间')
    return
  }
  
  issuing.value = true
  try {
    const response = await batchIssueToUsers({
      userIds: batchIssueForm.userIds,
      cardAmount: amount,
      cardCount: batchIssueForm.countPerUser
    })
    
    if (response.success) {
      const data = response.data
      ElMessage.success(`发放完成：成功${data.successCount}张，失败${data.failCount}张`)
      
      // 重置表单
      batchIssueForm.userIds = []
      batchIssueForm.countPerUser = 1
    }
  } catch (error) {
    console.error('发放失败:', error)
    ElMessage.error('发放失败')
  } finally {
    issuing.value = false
  }
}

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    0: 'info',
    1: 'warning',
    2: 'success',
    3: 'danger'
  }
  return types[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    0: '未发放',
    1: '已发放',
    2: '已兑换',
    3: '已过期'
  }
  return texts[status] || '未知'
}

// 隐藏卡号
const maskCardNumber = (cardNumber) => {
  if (!cardNumber || cardNumber.length <= 8) {
    return '****'
  }
  return cardNumber.substring(0, 4) + '****' + cardNumber.substring(cardNumber.length - 4)
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 退出登录
const handleLogout = async () => {
  try {
    await userStore.logout()
    ElMessage.success('已退出登录')
    router.push('/login')
  } catch (error) {
    console.error('退出登录失败:', error)
  }
}

// 初始化
onMounted(() => {
  handleQuery()
  getEmployeeList()
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.welfare-card-management {
  display: flex;
  height: 100vh;
  background: #f5f7fa;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: white;
  height: 100vh;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.admin-logo {
  display: flex;
  align-items: center;
}

.admin-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.admin-logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #f56c6c;
}

.sidebar-menu {
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
}

.menu-item {
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  
  &:hover {
    background-color: #f5f7fa;
  }
  
  &.active {
    background-color: #fef0f0;
    color: #f56c6c;
    border-right: 3px solid #f56c6c;
  }
}

.menu-icon {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

.sidebar-footer {
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-avatar-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.admin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f56c6c;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  margin-right: 10px;
}

.admin-info {
  flex: 1;
}

.admin-name {
  font-weight: 500;
  font-size: 14px;
}

.admin-role {
  color: #909399;
  font-size: 12px;
}

/* 退出登录按钮 */
.logout-btn {
  width: 100%;
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(239, 83, 80, 0.3);
}

.logout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(239, 83, 80, 0.4);
}

.logout-icon {
  font-size: 14px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  margin-left: 220px;
  padding: 20px;
}

/* 顶部导航 */
.top-nav {
  background-color: white;
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin: 0;
}

.page-title-icon {
  width: 32px;
  height: 32px;
  background-color: #f56c6c;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  color: white;
}

.tab-section {
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
}

:deep(.el-tabs__header) {
  background: white;
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.el-tabs__nav-wrap) {
  &::after {
    display: none;
  }
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 600;
  padding: 12px 32px;
  transition: all 0.3s ease;
  border-radius: 8px;
  
  &:hover {
    color: #409EFF;
    background: #ecf5ff;
  }
  
  &.is-active {
    color: #409EFF;
    font-weight: 700;
  }
}

:deep(.el-tabs__active-bar) {
  height: 3px;
  border-radius: 2px;
}

.tab-content {
  margin-top: 0;
  padding-top: 24px;
}

/* 卡片样式 */
.generate-card,
.filter-card,
.table-card,
.issue-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

:deep(.el-card__header) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 3px solid #409EFF;
  padding: 20px 28px;
  border-radius: 16px 16px 0 0;
}

:deep(.el-card__body) {
  padding: 28px;
}

.card-header {
  font-size: 18px;
  font-weight: 700;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 10px;
  
  span {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* 表单样式 */
:deep(.el-form) {
  .el-form-item {
    margin-bottom: 24px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
  font-size: 15px;
  margin-bottom: 8px;
}

:deep(.el-input__wrapper) {
  border-radius: 10px;
  padding: 8px 15px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  
  &:hover {
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.15);
  }
  
  &.is-focus {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
}

:deep(.el-select) {
  .el-input__wrapper {
    border-radius: 10px;
    padding: 8px 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    
    &:hover {
      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.15);
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
  }
}

.form-tip {
  color: #909399;
  font-size: 14px;
  margin-left: 12px;
}

.btn-icon {
  margin-right: 6px;
  font-size: 16px;
}

.generate-btn,
.import-btn,
.issue-btn,
.upload-btn,
.select-employee-btn,
.filter-btn {
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.generate-btn {
  background: linear-gradient(135deg, #ff7043 0%, #ff5722 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 112, 67, 0.3);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 112, 67, 0.45);
  }
  
  &:active {
    transform: translateY(-1px);
  }
}

.import-btn {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(102, 187, 106, 0.45);
  }
  
  &:active {
    transform: translateY(-1px);
  }
}

.issue-btn {
  background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(66, 165, 245, 0.45);
  }
  
  &:active {
    transform: translateY(-1px);
  }
}

.upload-btn {
  background: white;
  color: #606266;
  border: 2px solid #409EFF;
  
  &:hover {
    background: #409EFF;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(64, 158, 255, 0.3);
  }
  
  &:active {
    transform: translateY(-1px);
  }
}

.select-employee-btn {
  background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(171, 71, 188, 0.3);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(171, 71, 188, 0.45);
  }
  
  &:active {
    transform: translateY(-1px);
  }
}

.filter-btn {
  &.search-btn {
    background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(66, 165, 245, 0.45);
    }
    
    &:active {
      transform: translateY(-1px);
    }
  }
  
  &.reset-btn {
    background: white;
    color: #606266;
    border: 2px solid #dcdfe6;
    
    &:hover {
      background: #409EFF;
      color: white;
      border-color: #409EFF;
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(64, 158, 255, 0.3);
    }
    
    &:active {
      transform: translateY(-1px);
    }
  }
}

.selected-count {
  color: #606266;
  margin-left: 16px;
  font-size: 14px;
}

.amount-text {
  color: #67c23a;
  font-weight: 600;
}

/* 上传区域 */
.upload-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.batch-issue-section {
  padding: 20px 0;
}

/* 分页样式 */
.pagination-section {
  padding: 20px 0;
  display: flex;
  justify-content: flex-end;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
  
  .el-table__header {
    th {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      color: #606266;
      font-weight: 600;
      font-size: 14px;
      border-bottom: 2px solid #e4e7ed;
    }
  }
  
  .el-table__row {
    transition: all 0.3s ease;
    
    &:hover {
      background-color: #f8f9fa;
      transform: scale(1.005);
    }
  }
}

:deep(.el-tag) {
  border-radius: 8px;
  padding: 4px 12px;
  font-weight: 600;
  border: none;
}

.amount-text {
  color: #67c23a;
  font-weight: 700;
  font-size: 15px;
}

/* 分页样式 */
.pagination-section {
  padding: 24px 0;
  display: flex;
  justify-content: flex-end;
  
  :deep(.el-pagination) {
    .el-pagination__sizes,
    .el-pagination__total,
    .btn-next,
    .btn-prev,
    .el-pager li {
      border-radius: 8px;
      font-weight: 500;
    }
    
    .el-pager li.is-active {
      background: #409EFF;
      color: white;
      font-weight: 700;
    }
  }
}

/* 上传区域 */
.upload-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .main-content {
    margin-left: 0;
    padding-left: 240px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 70px;
    
    .admin-logo-text,
    .menu-item span,
    .admin-name,
    .admin-role {
      display: none;
    }
    
    .menu-item {
      justify-content: center;
    }
    
    .admin-logo {
      justify-content: center;
    }
    
    .admin-avatar-container {
      justify-content: center;
    }
  }
  
  .main-content {
    margin-left: 0;
    padding: 15px;
    padding-left: 85px;
  }
  
  .upload-section {
    flex-direction: column;
    align-items: stretch;
    
    .upload-btn,
    .import-btn {
      width: 100%;
      justify-content: center;
    }
  }
  
  :deep(.el-card__body) {
    padding: 16px;
  }
  
  :deep(.el-tabs__item) {
    padding: 12px 16px;
    font-size: 14px;
  }
}
</style>

